<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { storeToRefs } from 'pinia';
import { requestSynthesizeSearchResult } from '../../../utils/axiosURL'
import useSearchHistory from '../../../store/searchHistory';

// 拿取pinia的关键字
const { keyword_Store } = <any>storeToRefs(useSearchHistory())
// 存储请求的单曲数据
const saveSingleData = ref<any>([])
// 请求单曲的总数量
const allSingleLength = ref<any>(0)
// 请求歌单所有评论的页码
let allCommentPage = ref<any>(1)
onMounted(() => {
    requestSynthesizeSearchResultFn()
})

// 请求单曲
const requestSynthesizeSearchResultFn = () => {
    requestSynthesizeSearchResult(keyword_Store.value, 1, 30, allCommentPage.value).then((data: any) => {
        saveSingleData.value = data.result.songs
        allSingleLength.value = data.result.songCount
    }).catch(err => {
        console.log(err);
    })
}
watch(keyword_Store, () => requestSynthesizeSearchResultFn())
const changePages = () => {
    requestSynthesizeSearchResultFn()
}




</script>


<template>
    <div class="singleWrap">
        <div class="BtnWrap">
            <div class="addplay">
                <div class="addplay_Left">
                    <span class="iconfont icon-xiasanjiaoxing"></span>
                    <span>播放所有</span>
                </div>
                <div class="addSongList">
                    <span class="iconfont icon-jiahao"></span>
                </div>
            </div>
            <div class="downloadAll">
                <span class="iconfont icon-xiazai"></span>
                <span>下载全部</span>
            </div>
        </div>
        <div class="btmWrap" v-if="saveSingleData.length !== 0">
            <songtable :songList=saveSingleData />
        </div>
        <div v-else class="listSkeleton">
            <el-skeleton animated :rows="15" />
        </div>
        <div class="paging">
            <el-pagination small background layout="prev, pager, next" :total="allSingleLength"
                v-model:current-page="allCommentPage" @current-change="changePages" />
        </div>
    </div>
</template>


<style lang="scss" scoped>
.singleWrap {
    width: 100%;
    padding-bottom: 30px;
    box-sizing: border-box;

    .BtnWrap {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 40px;

        .addplay {
            display: flex;
            width: 130px;
            height: 30px;
            //margin-left: 10px;
            border-radius: 25px;
            overflow: hidden;
            @include background_color('bk_color');

            .addplay_Left {
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-basis: 95px;
                @include color('color');
                font-family: $textFont;

                .icon-xiasanjiaoxing {
                    transform: translateX(5px) rotate(-90deg);
                    font-size: 20px;
                }

                &:hover {
                    background-color: rgb(204, 50, 50);
                }
            }

            .addSongList {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                color: $theme-white;

                &:hover {
                    background-color: rgb(204, 50, 50);
                }
            }

            &:hover {
                cursor: pointer;
                background-color: rgb(215, 53, 53);
            }
        }

        .downloadAll {
            display: flex;
            justify-content: center;
            align-items: center;
            width: auto;
            height: 30px;
            margin-left: 15px;
            padding: 0 10px;
            box-sizing: border-box;
            border-radius: 25px;
            font-family: $textFont;
            color: gray;
            border: .2px solid rgb(206, 206, 206);
            background-color: #fff;

            span:nth-child(1) {
                font-size: 20px;
                margin-right: 4px;
            }

            &:hover {
                background-color: rgb(242, 242, 242);
                cursor: pointer;
            }
        }
    }

    .paging {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;

        :deep(.number) {
            border-radius: 4px;
            font-family: none;
            font-family: $textFont;
            background-color: transparent;
            border: 1px solid $lineColor;

            &:hover {
                color: $font_main_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.is-active) {
            background-color: $theme-red !important;
            border-radius: 4px;

            &:hover {
                color: $theme-white;
                background-color: $theme-red;
            }
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.more) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }
    }
}
</style>